<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Corona Admin</title>
    <!-- plugins:css -->
    <link rel="stylesheet" th:href="@{/css/materialdesignicons.min.css}">
    <link rel="stylesheet" th:href="@{/css/vendor.bundle.base.css}">
    <!-- endinject -->
    <!-- Plugin css for this page -->
    <!-- End plugin css for this page -->
    <!-- inject:css -->
    <!-- endinject -->
    <!-- Layout styles -->
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <!-- End layout styles -->

</head>
<body>
<div class="container-scroller">
    <div class="container-fluid page-body-wrapper full-page-wrapper">
        <div class="row w-100 m-0">
            <div class="content-wrapper full-page-wrapper d-flex align-items-center auth login-bg">
                <div class="card col-lg-4 mx-auto">
                    <div class="card-body px-5 py-5">
                        <h3 class="card-title text-left mb-3">Login</h3>
                        <form>
                            <div class="form-group">
                                <label>登录账号 *</label>
                                <input type="text" id="idinput" class="form-control p_input">
                            </div>
                            <div class="form-group">
                                <label>密码 *</label>
                                <input type="password" id="pwdinput" class="form-control p_input">
                            </div>
                            <div class="form-group">
                                <label>验证码 *</label>
                                <input type="text" id="code" class="form-control p_input" style="width:60%;">
                                <div class="login-code" style="width: 33%;float:right;margin-top:-38px;">
                                    <img id="captcha" src="default" onclick="getCode()" class="login-code-img"/>
                                </div>
                            </div>
<!--                            <div class="form-group d-flex align-items-center justify-content-between">-->
<!--                                <div class="form-check">-->
<!--                                    <label class="form-check-label">-->
<!--                                        <input type="checkbox" class="form-check-input"> Remember me </label>-->
<!--                                </div>-->
<!--                                <a href="#" class="forgot-pass">Forgot password</a>-->
<!--                            </div>-->
                            <div class="text-center">
                                <button onclick="tapLogin()" type="button" class="btn btn-primary btn-block enter-btn">Login</button>
                            </div>
<!--                            <div class="d-flex">-->
<!--                                <button class="btn btn-facebook mr-2 col">-->
<!--                                    <i class="mdi mdi-facebook"></i> Facebook </button>-->
<!--                                <button class="btn btn-google col">-->
<!--                                    <i class="mdi mdi-google-plus"></i> Google plus </button>-->
<!--                            </div>-->
<!--                            <p class="sign-up">Don't have an Account?<a href="#"> Sign Up</a></p>-->
                        </form>
                    </div>
                </div>
            </div>
            <!-- content-wrapper ends -->
        </div>
        <!-- row ends -->
    </div>
    <!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<script type="text/javascript" th:src="@{/js/axios.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
<script type="text/javascript" th:src="@{/js/message.js}"></script>
<script type="text/javascript">
    var codeUrl = null;
    var uuid = null;
    $(document).ready(function(){
        console.log('jq初始化完成')
        // 初始化内容
        getCode();
    });
    function getCode(){
        axios({
            method: 'get',
            url:'/system/captcha'
        }).then(res=>{
            console.log(res)
            codeUrl = res.data.data.img;
            uuid = res.data.data.uuid;
            console.log(codeUrl)
            $("#captcha").attr("src",codeUrl);
        })
    }
    function tapLogin(){
        console.log('登录')
        var loginId = $('#idinput').val();
        var loginPwd = $('#pwdinput').val();
        var code = $('#code').val();
        axios({
            method:'post',
            url:'/system/login',
            data:{
                username:loginId,
                password:loginPwd,
                code:code,
                uuid:uuid
            }
        }).then(res=>{
            console.log(res)
            if(res.data.code === 200){
                $(location).attr('href', '/plumelog/#');
            }else {
                Message.error(res.data.msg);
                getCode();
            }

        })
    }
</script>
<!-- endinject -->
</body>
</html>